import React, { useState } from 'react'
import { Card, Row, Col, Statistic, Progress, Button, Input, List, Avatar, Tag, Space, Typography } from 'antd'
import { 
  UserOutlined, 
  ShoppingCartOutlined, 
  DollarOutlined, 
  RiseOutlined,
  SearchOutlined,
  LikeOutlined,
  MessageOutlined,
  StarOutlined
} from '@ant-design/icons'

const { Title, Paragraph } = Typography
const { Search } = Input

/**
 * React子应用首页组件
 * @description 展示React子应用的主要功能和数据
 */
function Home() {
  // 状态管理
  const [searchValue, setSearchValue] = useState('')
  
  // 模拟数据
  const recentActivities = [
    {
      id: 1,
      title: '用户注册',
      description: '新用户张三注册了账户',
      avatar: <UserOutlined />,
      time: '2分钟前',
      type: 'success'
    },
    {
      id: 2,
      title: '订单完成',
      description: '订单 #12345 已完成支付',
      avatar: <ShoppingCartOutlined />,
      time: '5分钟前',
      type: 'processing'
    },
    {
      id: 3,
      title: '系统通知',
      description: '系统维护将在今晚进行',
      avatar: <MessageOutlined />,
      time: '10分钟前',
      type: 'warning'
    }
  ]

  // 处理搜索
  const handleSearch = (value) => {
    console.log('搜索:', value)
    setSearchValue(value)
  }

  return (
    <div>
      {/* 页面标题 */}
      <Title level={2}>React子应用首页</Title>
      <Paragraph>欢迎使用React子应用，这里展示了React相关的功能模块。</Paragraph>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={11280}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="订单数量"
              value={9320}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总收入"
              value={11280}
              prefix={<DollarOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="增长率"
              value={11.28}
              prefix={<RiseOutlined />}
              suffix="%"
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 搜索和进度 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} lg={12}>
          <Card title="快速搜索">
            <Search
              placeholder="输入关键词搜索..."
              enterButton={<SearchOutlined />}
              size="large"
              onSearch={handleSearch}
            />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="系统状态">
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>CPU使用率</span>
                <span>65%</span>
              </div>
              <Progress percent={65} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>内存使用率</span>
                <span>45%</span>
              </div>
              <Progress percent={45} />
            </div>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>磁盘使用率</span>
                <span>78%</span>
              </div>
              <Progress percent={78} status="exception" />
            </div>
          </Card>
        </Col>
      </Row>

      {/* 最近活动 */}
      <Card title="最近活动">
        <List
          itemLayout="horizontal"
          dataSource={recentActivities}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar icon={item.avatar} style={{ backgroundColor: item.type === 'success' ? '#52c41a' : item.type === 'processing' ? '#1890ff' : '#faad14' }} />}
                title={
                  <Space>
                    <span>{item.title}</span>
                    <Tag color={item.type === 'success' ? 'green' : item.type === 'processing' ? 'blue' : 'orange'}>
                      {item.type}
                    </Tag>
                  </Space>
                }
                description={
                  <div>
                    <div>{item.description}</div>
                    <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
                      {item.time}
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  )
}

export default Home 